<script lang="ts" setup>
import { reactive, toRefs } from 'vue'
import { useUserStores } from '@/stores'

const userStore = useUserStores()

const state = reactive({
  fits: ['cover'],
  url: userStore.userInfo.image
})
const { fits, url } = toRefs(state)

const showUserStore = () => {
  console.log(userStore.userInfo.image)
}
</script>

<template>
  <page-container title="基本资料">
    <template #extra>
      <el-button @click="showUserStore">测试</el-button>
    </template>
    <div class="demo-fit">
      <div v-for="fit in fits" :key="fit" class="block">
        <span class="title"></span>
        <el-avatar shape="square" :size="150" :fit="fit" :src="url" />
      </div>
    </div>
  </page-container>
</template>
